<!-- components/reconciliation/ResultsTable.vue -->
<template>
  <el-table
    :data="data"
    v-loading="loading"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    class="results-table"
    :row-class-name="getRowClassName"
    stripe
  >
    <el-table-column type="selection" width="50" />
    
    <!-- 置信度列 -->
    <el-table-column prop="matchInfo.confidence" label="置信度" width="120">
      <template #default="{ row }">
        <ConfidenceIndicator 
          :confidence="row.matchInfo.confidence"
          :status="row.matchInfo.matchStatus"
        />
      </template>
    </el-table-column>
    
    <!-- 订单信息列 -->
    <el-table-column label="订单信息" min-width="200">
      <template #default="{ row }">
        <OrderInfoCell :order="row.orderInfo" />
      </template>
    </el-table-column>
    
    <!-- 流水信息列 -->
    <el-table-column label="银行流水" min-width="200">
      <template #default="{ row }">
        <TransactionInfoCell :transaction="row.transactionInfo" />
      </template>
    </el-table-column>
    
    <!-- 匹配详情列 -->
    <el-table-column label="匹配详情" width="180">
      <template #default="{ row }">
        <MatchDetailsCell 
          :match-info="row.matchInfo"
          :difference-info="row.differenceInfo"
        />
      </template>
    </el-table-column>
    
    <!-- 差异分析列 -->
    <el-table-column label="差异分析" width="150" v-if="showDifferences">
      <template #default="{ row }">
        <DifferenceAnalysisCell 
          :difference-info="row.differenceInfo"
          :reasoning="row.reasoning"
        />
      </template>
    </el-table-column>
    
    <!-- 操作列 -->
    <el-table-column label="操作" width="150" fixed="right" v-if="showActions">
      <template #default="{ row }">
        <div class="action-buttons">
          <el-button 
            type="success" 
            link 
            :icon="Check" 
            @click.stop="handleConfirmMatch(row)"
            v-if="row.matchInfo.matchStatus === 'pending'"
          >
            确认
          </el-button>
          <el-button 
            type="danger" 
            link 
            :icon="Close" 
            @click.stop="handleRejectMatch(row)"
            v-if="row.matchInfo.matchStatus === 'pending'"
          >
            拒绝
          </el-button>
          <el-button 
            type="primary" 
            link 
            :icon="View" 
            @click.stop="handleViewDetails(row)"
          >
            详情
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { Check, Close, View } from '@element-plus/icons-vue'
import type { ReconciliationResult } from '@/types/reconciliation'
import ConfidenceIndicator from './ConfidenceIndicator.vue'
import OrderInfoCell from './OrderInfoCell.vue'
import TransactionInfoCell from './TransactionInfoCell.vue'
import MatchDetailsCell from './MatchDetailsCell.vue'
import DifferenceAnalysisCell from './DifferenceAnalysisCell.vue'

const props = defineProps<{
  data: ReconciliationResult[]
  loading: boolean
  showActions?: boolean
  showDifferences?: boolean
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: ReconciliationResult[]): void
  (e: 'row-click', row: ReconciliationResult): void
  (e: 'confirm-match', match: ReconciliationResult): void
  (e: 'reject-match', match: ReconciliationResult): void
  (e: 'view-details', match: ReconciliationResult): void
}>()

const handleSelectionChange = (selection: ReconciliationResult[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: ReconciliationResult) => {
  emit('row-click', row)
}

const handleConfirmMatch = (match: ReconciliationResult) => {
  emit('confirm-match', match)
}

const handleRejectMatch = (match: ReconciliationResult) => {
  emit('reject-match', match)
}

const handleViewDetails = (match: ReconciliationResult) => {
  emit('view-details', match)
}

const getRowClassName = ({ row }: { row: ReconciliationResult }) => {
  switch (row.matchInfo.matchStatus) {
    case 'confirmed':
      return 'match-confirmed'
    case 'pending':
      return 'match-pending'
    case 'rejected':
      return 'match-rejected'
    default:
      return ''
  }
}
</script>

<style scoped>
.results-table {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

:deep(.match-confirmed) {
  background-color: #f0f9ff;
}

:deep(.match-pending) {
  background-color: #fdf6ec;
}

:deep(.match-rejected) {
  background-color: #fef0f0;
}
</style>